<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
</head>
<body>

   <div class="dev">
    {{msg}}
    <div>
        {{people.name + people.age + people.sex}}
    </div>
    <button @click="change()">点我</button>
   </div> 
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const {ref,createApp} = Vue
        createApp({
            setup() {
                const msg = ref("hello vue")
                const people = ref({
                    name:'张三',
                    age:'17',
                    sex:'man'
                })
                console.log(msg)
                function change(){
                    alert("点击了按钮")
                    msg.value = "改变了vue"
                    people.value.age = '89'
                    people.value.sex = 'woman'
                }

                return{
                    msg,
                    change,
                    people
                }
            }
        }).mount('.dev')
    </script>
</body>
</html>